<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css" />
    <link rel="stylesheet" href="/css/coupon/couponManage/couponList/coupon-list.css">
    <script src="/js/public/public.js"></script>
</head>
<body>
<div class="layui-row">
    <div class="layui-col-md12">
        <div class="list">
            <div class="list-left layui-col-md8">
                <div class="list-left-left"></div>
                <p class="list-left-right">优惠券列表</p>
            </div>
            <div class="list-right layui-col-md4">
                <div class="queryButtonBox">
                    <button class="list-right-left layui-btn" style="margin-top: 3px" onclick="refresh()">
                        <i class="layui-icon layui-icon-refresh"></i>&nbsp;刷新
                    </button>
                    <button class="list-right-right layui-btn" id="goBack" style="margin-top: 3px">
                        <i class="layui-icon layui-icon-left"></i>&nbsp;返回
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-row query">
            <div class="layui-card headerCenter">
                <div class="layui-card-header backColor">
                    <i class="layui-icon">&#xe615;</i>
                    筛选查询
                    <button id="search" class="layui-btn query-top-right" onclick="retrieval()">高级检索</button>
                </div>
                <div class="layui-card-body">
                    <form class="layui-form">
                        <div class="layui-form-item ">
                            <label class="layui-form-label">优惠券名称：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="couponName" class="layui-input" layui-verify="required" required placeholder="请输入商品名称">
                            </div>
                            <label class="layui-form-label">发放方式：</label>
                            <div class="layui-input-inline">
                                <select class="layui-select" name="grant" id="grant">
                                    <option value=""></option>
                                    <option value="2">自动发放</option>
                                    <option value="3">活动领取</option>
                                    <option value="4">人工发放</option>
                                    <option value="5">未定义的</option>
                                </select>
                            </div>
                            <label class="layui-form-label">优惠券状态：</label>
                            <div class="layui-input-inline">
                                <select class="layui-select" name="online" id="online">
                                    <option value=""></option>
                                    <option value="2">上架</option>
                                    <option value="3">下架</option>
                                </select>
                            </div>
                            <div class="queryButtonBox">
                                <button type="button" class="layui-btn" onclick="search()">
                                    <i class="layui-icon layui-icon-search"></i>&nbsp;搜索
                                </button>
                                <button type="reset" class="layui-btn layui-btn-warm">
                                    <i class="layui-icon layui-icon-refresh"></i>&nbsp;重置
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <!--数据列表-->
        <div class="record">
            <div class="record-right">
                <!--表-->
                <table id="demoTable" lay-filter="demoTable"></table>
            </div>
        </div>
        <!--表头样式-->
        <div class="tableHeader" style="display:none" id="tableHeader">
            <i class="layui-icon layui-icon-align-left"></i>优惠券列表
            <button type="button" style="float: right;" class="layui-btn import" onclick="addCoupon()">
                <i class="layui-icon">&#xe608;</i>&nbsp;添加优惠券
            </button>
        </div>
        <!--表内操作-->
        <div id="button_caozuo" style="display:none" >
            <a alt="查看" title="查看"  lay-event="selectTable" style="color:green;">查看</a>
            <a alt="删除" title="删除"  lay-event="deleteTable" style="color:green;">删除</a>
        </div>
    </div>
</div>

<script>
    layui.use(['jquery','layer','table','form'],function(){
        var $=layui.jquery;
        var layer=layui.layer;
        var table=layui.table;
        var form=layui.form;

        refresh=function refresh(){
            location.reload();
        }

        getTable('','','');

        search=function search(){
            var couponName=$("input[name=couponName]").val();
            var grant;
            if($("#grant option:selected").text()=="自动发放"){
                grant=$("#grant option:selected").val();
            }else if($("#grant option:selected").text()=="活动领取"){
                grant=$("#grant option:selected").val();
            }else if($("#grant option:selected").text()=="人工发放"){
                grant=$("#grant option:selected").val();
            }else if($("#grant option:selected").text()=="未定义的"){
                grant=$("#grant option:selected").val();
            }
            var online;
            if($("#online option:selected").text()=="上架"){
                online=$("#online option:selected").val();
            }else if($("#online option:selected").text()=="下架"){
                online=$("#online option:selected").val();
            }
            getTable(couponName,grant,online);
        }

        function getTable(couponName,grant,online){
            var param={
                'couponName':couponName,
                'grant':grant,
                'online':online
            }
            $.ajax({
                url:"/JsUserCoupon/getJsUserCouponList",
                type:"post",
                dataType:"json",
                data:param,
                success:function (data) {
                    demoTable(data.data);
                }
            })
        }

        retrieval=function retrieval(){
            layer.open({
                type : 2,
                title : "高级检索",
                area : [ '900px', '500px' ],
                shade : 0,
                offset: 'auto',
                content :"senior-sample.html",
                btn:['确定','取消'],
                yes: function(index, layero){
                    var child = layero.find('iframe').contents();
                    var couponName= child.find("input[name=couponName]").val();
                    var grant=child.find("#grant option:selected").val();
                    var startDate=child.find("input[name=startDate]").val();
                    var online=child.find("#online option:selected").val();
                    var param = {
                        'couponName':couponName,
                        'grant':grant,
                        'startDate':startDate,
                        'online':online,
                    }
                    $.ajax({
                        url:"/JsUserCoupon/getJsUserCouponRetrieval",
                        data:param,
                        type:"post",
                        dataType:"json",
                        success:function (data) {
                            demoTable(data.data);
                            layer.close(layer.index);
                        }
                    })
                }
            })
        }

        function demoTable(data) {
            table.render({
                elem: '#demoTable',
                title: "优惠券列表",
                data: data,
                toolbar: '#tableHeader',
                limit: 10,
                page: {
                    layout: ['count', 'prev', 'page', 'next', 'limit', 'skip', 'refresh'],
                    limits: [10, 20, 30],
                    first: "首页",
                    last: "尾页",
                },
                cols:[[
                    {type:'checkbox'},
                    {field:"couponName",title:"优惠券名称",align:"center"},
                    {field:"startDate",title:"开始时间",align:"center"},
                    {field:"endDate",title:"结束时间",align:"center"},
                    {field:"online",title:"不上线/上线",align:"center",templet:function (data) {
                            if(data.online==2){
                                return '<input type=\"checkbox\" value="'+data.couponId+'" lay-skin=\"switch\" checked lay-filter="switchTest">';
                            }else if(data.online==3){
                                return '<input type=\"checkbox\" value="'+data.couponId+'" lay-skin=\"switch\" lay-filter="switchTest"\>';
                            }
                        }},
                    {field:"grant",title:"发放方式",align:"center",templet:function (data) {
                            if (data.grant == 2){
                                return "自动发放";
                            } else if (data.grant == 3) {
                                return "活动领取";
                            }else if (data.grant == 4) {
                                return "人工发放";
                            }else if (data.grant == 5) {
                                return "未定义的";
                            }
                        }},
                    {field:"issueQuantity",title:"发行数",align:"center"},
                    {field:"",title:"剩余数",align:"center",templet:function (data) {
                            return data.issueQuantity - data.used;
                        }},
                    {field:"",title:"操作",align:"center",toolbar:"#button_caozuo"}
                ]]
            })
        }

        form.on('switch(switchTest)', function(data){
            if(data.elem.checked==true){
                $.ajax({
                    url:"/JsUserCoupon/updateJsUserCouponOnline",
                    type:"post",
                    dataType:"json",
                    data:{'online':2,'couponId':data.value},
                    success:function (data) {
                        getTable('','','');
                        layer.msg("修改成功！！！");
                    }
                })
            }else{
                $.ajax({
                    url:"/JsUserCoupon/updateJsUserCouponOnline",
                    type:"post",
                    dataType:"json",
                    data:{'online':3,'couponId':data.value},
                    success:function (data) {
                        getTable('','','');
                        layer.msg("修改成功！！！");
                    }
                })
            }
        })

        table.on('tool(demoTable)',function (obj) {
            var event = obj.event;
            if (event == "selectTable"){
                layer.open({
                    type:2,
                    title:"查看",
                    area:["95%","100%"],
                    scrollbar: false,
                    offset:'auto',
                    btn:["确定","取消"],
                    content:"coupon-select.html",
                    success:function(layero,index){
                        var child = layero.find('iframe').contents();
                        child.find("#couponCode").text(obj.data.couponCode);
                        child.find("#couponPrice").text(obj.data.couponPrice);
                        child.find("#couponName").text(obj.data.couponName);
                        child.find("#startDate").text(obj.data.startDate);
                        child.find("#endDate").text(obj.data.endDate);
                        if(obj.data.online==2){
                            child.find("#online").text("上线");
                        }else if(obj.data.online==3){
                            child.find("#online").text("下线");
                        }
                        if(obj.data.grant==2){
                            child.find("#grant").text("自动发放");
                        }else if(obj.data.grant==3){
                            child.find("#grant").text("活动领取");
                        }else if(obj.data.grant==4){
                            child.find("#grant").text("人工发放");
                        }else if(obj.data.grant==5){
                            child.find("#grant").text("未定义的");
                        }
                        child.find("#issueQuantity").text(obj.data.issueQuantity);
                        child.find("#used").text(obj.data.used);
                        child.find("#pricuteUrl").attr("src",obj.data.pricuteUrl);
                        if(obj.data.type==2){
                            child.find("#type").text("商品");
                        }else if(obj.data.type==3){
                            child.find("#type").text("视频");
                        }
                    },
                    end:function (layero, index) {
                        layer.close(index);
                    }
                });
            }else if(event == "deleteTable") {
                layer.confirm('确认要删除吗?', {icon: 3, title:'提示'}, function(index){
                    $.ajax({
                        url:"/JsUserCoupon/deleteJsUserCoupon",
                        data:{'couponId':obj.data.couponId},
                        type:"post",
                        dataType:"json",
                        success:function (data) {
                            layer.msg("删除成功");
                            getTable('','','');
                        }
                    })
                    layer.close(index);
                })
            }
        })

        addCoupon=function addCoupon(){
            parent.addTab(52);
        }


    })

</script>
</body>
</html>